<template>
	<view class="music-list colorSky">
		<musicHead title="搜索" :icon="true" :iconBlack="true"></musicHead>
		<view class="container">
			<scroll-view scroll-y="true">
				<view class="index-serch">
					<text class="iconfont icon-RectangleCopy"></text>
					<input v-model="serchKeyword" type="text" placeholder="搜索歌曲" @confirm="handleToSearth(serchKeyword)">
					<text v-if="serchKeyword != ''" @tap="serchKeyword = ''" class="iconfont icon-guanbijiantou"></text>
				</view>
				<block v-if="serchKeyword == ''">
					<view class="serch-history">
						<view class="serch-history-head">
							<text>历史记录</text>
							<text @tap="handleClear()" class="iconfont icon-delete"></text>
							
						</view>
						<view class="serch-history-list">
							<view v-if="searchHistory.length == 0">开始你的音乐之旅吧</view>
							<view 
							v-for="(item,index) in searchHistory" :key="index"
							@tap="handleToWord(item)">{{item}}</view>
						</view>
					</view>
					<view class="serch-hot">
						<view class="serch-hot-head">热搜榜</view>
						<view class="serch-hot-item"
						@tap="handleToWord(item.searchWord)"
						v-for="(item,index) in hotSerchList" :key="index">
							<view class="serch-hot-top">{{index + 1}}</view>
							<view class="serch-hot-word">
								<view>{{item.searchWord}}<image :src="item.iconUrl" mode="aspectFit"></image></view>
								<view></view>
							</view>
							<text class="serch-hot-count">{{item.score}}</text>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="search-result">
						<view class="search-result-item" v-for="item in searchList" :key="item.id" 
						@tap="handleToDetail(item.id)">
							<view class="search-result-word">
								<view>{{item.name}}</view>
								<view>{{item.artists[0].name}}--{{item.album.name}}</view>
							</view>
							<text class="iconfont icon-bofang1"></text>
						</view>
					</view>	
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import musicHead from "@/components/musicHead/musicHead.vue"
import {searchHot,searchWord,searchSuggest } from "@/common/api.js"
	export default {
		components : {
			musicHead
		},
		data() {
			return {
				hotSerchList:[],
				serchKeyword:'',
				searchHistory:[],
				searchList:[],
			}
		},
		methods:{
			handleToWord(word){
				this.serchKeyword = word
				this.handleToSearth(word)
			},
			handleToSearth(word){
				this.searchHistory.unshift(word)
				this.searchHistory = [...new Set(this.searchHistory)]
				if(this.searchHistory.length > 10){
					this.searchHistory.length = 10
				}
				uni.setStorage({
					key:'searchHistory',
					data:this.searchHistory
				})
				this.getSearchList(word)
			},
			handleClear(){
				uni.removeStorage({
					key:'searchHistory',
					success: (res) => {
						this.searchHistory = []
						this.serchKeyword = ""
					}
				})
			},
			getSearchList(word){
				searchWord(word).then((res)=>{
					if(res[1].data.code == "200"){
						this.searchList = res[1].data.result.songs
					}
				})
			},
			handleToDetail(songId){
				uni.navigateTo({
					url:`/pages/detail/detail?songId=${songId}`
				})
			},
		},
		onLoad(){
			searchHot().then(res=>{
				if(res[1].data.code == "200"){
					this.hotSerchList = res[1].data.data
				}
			}),
			uni.getStorage({
				key:'searchHistory',
				success: (res) => {
					this.searchHistory = res.data
				}
			})
		}
			
	}
</script>

<style lang="less" scoped>
	.index-serch{
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 70rpx 30rpx 30rpx 30rpx;
		background: #f7f7f7;
		border-radius: 50rpx;
		margin-bottom:40rpx;
	}
	.index-serch text{
		font-size: 26rpx;
		margin: 0 26rpx;
	}
	.index-serch input{
		font-size: 28rpx;
		flex: 1;
	}
	.serch-history{
		margin: 0 30rpx;
		.serch-history-head{
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			margin-bottom:30rpx;
		}
		.serch-history-list{
			display: flex;
			flex-wrap: wrap;
			view{
				font-size: 28rpx;
				padding: 16rpx 28rpx;
				border-radius: 40rpx;
				margin-bottom: 32rpx;
			}
		}
	}
	.serch-hot{
		margin: 0 30rpx;
		.serch-hot-head{
			font-size: 28rpx;
			margin-bottom:24rpx;
		}
		.serch-hot-item{
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			.serch-hot-top{
				width: 60rpx;
				
			}
			.serch-hot-word{
				flex: 1;
				font-size: 30rpx;
				view:nth-child(1){
					image{
						width: 48rpx;
						height: 22rpx;
					}
				}
				view:nth-child(2){
				}
			}
			.serch-hot-count{
				font-size: 24rpx;
			}
		}
	}
	.search-result{
		padding: 30rpx;
		.search-result-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			.search-result-word{
				flex: 1;
				font-size: 28rpx;
				view:nth-child(1){
					margin-bottom: 12rpx;
				}
				view:nth-child(2){
					font-size: 20rpx;
				}
			}
			text{}
		}
	}
</style>